<template>
  <div class="lesson-introduce">
    <div class="lesson-introduce-container ql-snow">
      <div class="ql-editor">
        <uiParse
          :imageProp="{  
              padding: 0,
              lazyLoad: false,
              domain: '' ,
              'max-width': '690rpx', 
              'width': '690rpx'}"
          :content="content"
        ></uiParse>
      </div>
    </div>
    <!-- 相关课程 -->
    <lessonRecommend :lessonId="lessonId" v-if="lessonId"></lessonRecommend>
    <!-- 讲师推荐课程 -->
    <lessonLecturerRecommend :lecturerId="lecturerId" v-if="lecturerId"></lessonLecturerRecommend>
    <!-- 讲师推荐课程 -->
    <lessonStudentDynamic :lessonId="lessonId" v-if="lessonId"></lessonStudentDynamic>
  </div>
</template>

<script>
import lessonRecommend from "./lesson-recommend";
import lessonLecturerRecommend from "./lesson-lecturer-recommend.vue";
import lessonStudentDynamic from "./student-dynamic";
import uiParse from "@/components/base/parse/index";

export default {
  name: "lessonIntroduce",
  props: {
    content: String,
    lecturerId: [String, Number],
    lessonId: [String, Number]
  },
  components: {
    uiParse,
    lessonRecommend,
    lessonLecturerRecommend,
    lessonStudentDynamic
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style lang="scss">
.lesson-introduce-container{
  background-color: #fff;
  border: none;
  padding-top: 42px;
  img {
    max-width: 690px;
  }
  .ql-editor {
    padding-top: 0;
    padding-left: 30rpx;
    padding-right: 30rpx;
  }
}
</style>
